<template>
    <transition name="fade">
      <div class="wrapper wrapper-content animated fadeInRight">
      <!-- <h5 v-if="flag"> -->
        <div class="row">
          <div class="col-sm-13">
            <div class="block">
               <el-carousel indicator-position="outside" :height="banH +'px'" interval="5000">
                  <el-carousel-item v-for="item in images" :key="item.id">
                    <img :src="item.idView"></img>
                  </el-carousel-item>
                </el-carousel>
              </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-13">
            <div class="ibox float-e-margins" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div class="ibox-title">
                <h5>订单</h5>
              </div>
              <div class="ibox-content">
                <div class="row">
                  <div class="">
                    <div class="flot-chart col-sm-9">
                      <div style="height: 220px;" ref="flotChart"></div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <ul class="stat-list">
                      <li v-for="item in orderTab">
                        <h2 class="no-margins">{{item.num}}</h2>
                        <small>{{item.title}}</small>
                        <div class="stat-percent">{{item.persent}} <i class="text-navy"
                            :class="titleMsgIcon[item.state]"></i>
                        </div>
                        <div class="progress progress-mini">
                          <div :style="`width: ${item.persent};`" class="progress-bar"></div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        
      </div>
      <!-- </h5> -->
    </transition>
</template>

<script>
export default {
  mounted() {
    this.getMonthOrder();
    this.getOrderInfo();
    setTimeout(() => {
      this.painChart();
      this.flag = true;
    }, 500);
    let _this = this;
    window.onresize = function () {
      _this.chart.resize();
    };
  },
  data() {
    return {
      countNet: 0,
      images: [
        { id: 0, idView: this.$http.defaults.baseURL + "zhiwei01.jpg" },
        { id: 1, idView: this.$http.defaults.baseURL + "zhiwei02.jpg" },
        { id: 2, idView: this.$http.defaults.baseURL + "zhiwei03.jpg" },
        { id: 3, idView: this.$http.defaults.baseURL + "zhiwei04.jpg" },
      ],
      banH: 500,
      msgFlag: true,
      msgArray: "el-icon-arrow-up",
      msgBoxFlag: true,
      chart2: "",
      titleMsg: [
        {
          title: "收入",
          date: "月",
          desc: "总收入",
          num: "4,886,200",
          persent: "85%",
          state: 2,
        },
        {
          title: "订单",
          date: "全年",
          desc: "新订单",
          num: "26,200",
          persent: "20%",
          state: 1,
        },
        {
          title: "访客",
          date: "今天",
          desc: "新访客",
          num: "3,280",
          persent: "24%",
          state: 1,
        },
        {
          title: "活跃用户",
          date: "最近一月",
          desc: "12月",
          num: "6,200",
          persent: "23%",
          state: 0,
        },
      ],
      orderTab: [
        {
          num: "2,346",
          title: "本月入库",
          persent: "48%",
          state: 1,
        },
        {
          num: "4,836",
          title: "本月订单",
          persent: "60%",
          state: 0,
        },
        {
          num: "9,366",
          title: "本月销售额",
          persent: "22%",
          state: 2,
        },
      ],
      titleMsgIcon: {
        2: "fa fa-bolt",
        1: "fa fa-level-up",
        0: "fa fa-level-down",
        7: "fa fa-check-square", //勾选
        8: "fa fa-square-o", //未勾选
        10: "todo-completed", //完成
      },
      things: [
        {
          title: "开会",
          done: true,
          leftTime: "1小时",
        },
        {
          title: "项目发布",
          done: true,
          leftTime: "1小时",
        },
        {
          title: "修改bug",
          done: false,
          leftTime: "1小时",
        },
      ],
      titleMsgColor: {
        txt: ["label-success", "label-info", "label-primary", "label-danger"],
        ico: ["text-success", "text-info", "text-navy", "text-danger"],
      },
      flag: false,
      chart: null,
      msgsTotol: 20,
      msgs: [
        {
          name: "井幽幽",
          msg: "有人说：“一辈子很长，要跟一个有趣的人在一起”。我想关注我的人，应该是那种喜欢找乐子也乐意分享乐趣的人，你们一定挺优秀的。所以单身的应该在这条留言，互相勾搭一下。特别有钱人又帅可以直接私信我！",
          timesAgo: "1月前",
          date: "4月11日 00:00",
        },
      ],

      option: {
        grid: {
          left: 60,
          right: "6%",
          height: "65%",
          bottom: 24,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ["line", "bar"],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          data: ["订单量", "入库量", "月收益"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "订单数",
            min: 0,
            max: 1500,
            interval: 300,
            axisLabel: {
              formatter: "{value} 单",
            },
          },
          {
            type: "value",
            name: "收益",
            min: 0,
            max: 50,
            interval: 10,
            axisLabel: {
              formatter: "{value} 元",
            },
          },
        ],
        series: [
          {
            name: "订单量",
            type: "bar",
            data: [],
            color: "rgb(54, 127, 169)",
          },
          {
            name: "入库量",
            type: "bar",
            data: [],
            color: "rgb(0, 0, 0)",
          },
          {
            name: "月收益",
            type: "line",
            yAxisIndex: 1,
            data: [],
            color: "rgb(26, 179, 148)",
          },
        ],
      },
    };
  },
  methods: {
    async getMonthOrder() {
      const { data: result } = await this.$http.get("/order/thisMonth");
      if (result.status !== 200)
        return this.$message.error("本月订单信息查询失败");
      this.orderTab = result.data;
    },
    async getOrderInfo() {
      const { data: result } = await this.$http.get("/order/info");
      if (result.status !== 200) return this.$message.error("订单信息查询失败");
      this.option.series[0].data = result.data.outNum;
      this.option.series[1].data = result.data.inNum;
      this.option.series[2].data = result.data.incomeNum;
      var max = 0;
      for (var n of result.data.outNum) {
        max = n > max ? n : max;
      }
      for (var m of result.data.inNum) {
        max = m > max ? m : max;
      }
      var interval = Math.ceil(max / 5);
      this.option.yAxis[0].max = 5 * interval;
      this.option.yAxis[0].interval = interval;
      var maxin = 0;
      for (var p of result.data.incomeNum) {
        maxin = p > maxin ? p : maxin;
      }
      var interval2 = Math.ceil(maxin / 5) * 1.8;
      this.option.yAxis[1].max = 5 * interval2;
      this.option.yAxis[1].interval = interval2;
      this.countNet++;
    },
    painChart() {
      this.chart = this.$echarts.init(this.$refs.flotChart);
      this.chart.setOption(this.option);
    },

    closeMsg() {
      this.msgBoxFlag = false;
    },
  },
  directives: {
    drag: {},
  },
  watch: {
    countNet(val, oldVal) {//普通的watch监听
            setTimeout(() => {
                this.painChart()
            }, 1000)
            //  
        },
    msgFlag: function (flag) {
      if (flag == true) {
        this.msgArray = "el-icon-arrow-up";
      } else {
        this.msgArray = "el-icon-arrow-down";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
  transition: all 0.8s ease;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 2.75;
  line-height: 270px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img {
  width: 100%;
  height: 100%;
}

.welcome {
  height: 100%;
}
</style>
